<template>
  <div>
    <h3>查找词语索引</h3>
    <textarea v-model="text" rows="10" cols="50" placeholder="请输入文本内容"></textarea>
    <br />
    <input type="text" v-model="word" placeholder="请输入要查找的词语" />
    <button @click="findWord">查找</button>
    <div v-if="result !== null">
      <p>词语 "{{ word }}" 的索引是：{{ result }}</p>
    </div>
    <div v-else>
      <p>未找到词语 "{{ word }}"</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "", // 存储输入的文本内容
      word: "", // 存储要查找的词语
      result: null // 存储查找结果的索引
    };
  },
  methods: {
    findWord() {
      // 使用 JavaScript 的 indexOf 方法查找词语索引
      const index = this.text.indexOf(this.word);
      this.result = index !== -1 ? index : null; // 如果找到，返回索引；否则返回 null
    }
  }
};
</script>

<style scoped>
textarea {
  margin-bottom: 10px;
}

input {
  margin-right: 10px;
}
</style>